<template>
  <div>
    <!--使用draggable组件 :options="{group:{name: 'itxst',pull:'clone'},sort: true}"   group="itxst"-->
    <el-row>
      <div class="col">
        <draggable
          v-model="arr1"
          @add="add1"
          @end="end1"
          group="itxst"
          animation="300"
          :move="onMove1"
        >
          <transition-group>
            <div
              :class="item.id == 1 ? 'item forbid' : 'item'"
              v-for="item in arr1"
              :key="item.id"
              data-tag="taga1"
            >
              {{ item.name }}
            </div>
          </transition-group>
        </draggable>
      </div>
      <p></p>
    </el-row>

    <el-row>
      <div class="col">
        <draggable
          v-model="arr2"
          @add="add2"
          @end="end2"
          group="itxst"
          animation="300"
          :move="onMove2"
        >
          <transition-group>
            <div
              :class="item.id == 1 ? 'item2 forbid' : 'item2'"
              v-for="item in arr2"
              :key="item.id"
              data-tag="taga2"
            >
              {{ item.name }}
            </div>
          </transition-group>
        </draggable>
      </div>
      <p></p>
    </el-row>

    <el-row>
      <div class="col">
        <draggable
          v-model="arr3"
          @add="add3"
          @end="end3"
          group="itxst"
          animation="300"
          :move="onMove3"
        >
          <transition-group>
            <div
              :class="item.id == 1 ? 'item2 forbid' : 'item2'"
              v-for="item in arr3"
              :key="item.id"
              data-tag="taga3"
            >
              {{ item.name }}
            </div>
          </transition-group>
        </draggable>
      </div>
    </el-row>
  </div>
</template>
<script>
//导入draggable组件，
// 事件调用机制   1.move调用，add回调，add之后调用end回调->结束 2.move->end调用->结束。add和end直接可以当做是一个事件，执行add后end不可被打断
import draggable from "vuedraggable";
export default {
  //注册draggable组件
  components: {
    draggable,
  },
  data() {
    return {
      index: 9999,
      toTag: "",
      orginTag: "",
      draggedContext: {},
      originIndex: 0,
      futureIndex: 0,
      //定义要被拖拽对象的数组
      arr1: [
        { id: 1, name: "www.itxst.com" },
        { id: 2, name: "www.jd.com" },
        { id: 3, name: "www.baidu.com" },
      ],

      arr2: [
        { id: 12, name: "and" },
        { id: 13, name: "or" },
      ],
      arr3: [{ id: 11, name: "展位菜单" }],
      moveId: -1,
      /** orgin代表拖拽源头，to代表要移动到的目的地，1,2,3分别代表的是数组arr1,arr2,arr3
       *       orgin1 orgin2 orgin3
       * to1     0      0      0
       * to2     1      0      1
       * to3     1      1      1
       */
      moveable: [
        [0, 0, 0],
        [1, 0, 1],
        [1, 1, 1],
      ],
      hasDo: false,
    };
  },
  methods: {
    add1() {
      this.toArea = this.arr1;
      this.toTag = 0;
    },
    add2() {
      this.toArea = this.arr2;
      this.toTag = 1;
    },
    add3() {
      this.toArea = this.arr3;
      this.toTag = 2;
    },
    clear() {
      this.toTag = "";
      this.orginTag = "";
      this.draggedContext = {};
      this.drag = "";
    },
    //左边往右边拖动时的事件
    end1(e) {
      console.log(e, "结束1");
      console.log(this.originArea, this.toArea, this.draggedContext);
      if (!this.toTag) {
        // 拖空白处
        return;
      }
      // 数据生成
      if (this.drag == "taga3") {
        // 检测连通性
        console.log(
          this.orginTag,
          this.toTag,
          this.moveable[this.toTag][this.orginTag]
        );
        if (this.moveable[this.toTag][this.orginTag]) {
          let name = this.draggedContext.element.name;
          setTimeout(() => {
            this.arr3.splice(this.futureIndex, 0, { id: this.index--, name });
          }, 300);
        }
      }
      // 数据清洗,非常重要
      this.clear();
    },
    end2(e) {
      console.log(e, "结束2");
      if (!this.toTag) {
        // 拖空白处
        return;
      }
      // 数据生成
      if (this.drag == "taga3") {
        // 检测连通性
        console.log(
          this.toTag,
          this.orginTag,
          this.moveable[this.toTag][this.orginTag]
        );
        if (this.moveable[this.toTag][this.orginTag]) {
          console.log("ar3");
          let name = this.draggedContext.element.name;
          setTimeout(() => {
            this.arr3.splice(this.futureIndex, 0, { id: this.index--, name });
          }, 400);
        }
      }

      // 数据清洗,非常重要
      this.clear();
    },
    end3(e) {
      console.log(e, "结束3");
      if (!this.toTag) {
        return;
      }

      // 数据清洗,非常重要
      this.clear();
    },
    onMove1(e) {
      console.log("拖拽1");
      this.orginTag = 0;
      this.originArea = this.arr1;
      this.draggedContext = e.draggedContext;
      this.futureIndex = e.draggedContext.futureIndex;
      this.originIndex = e.draggedContext.index;

      this.drag = e.related.dataset.tag;
      // 自拖拽,允许
      if (e.related.dataset.tag == "taga1") {
        return true;
      }
      // 1拖到3
      if (e.related.dataset.tag == "taga3") {
        this.add3();
        return false;
      }
      // 其他情况不允许拖拽
      return false;
    },

    onMove2(e) {
      console.log("拖拽2");
      this.orginTag = 1;
      this.originArea = this.arr2;
      this.draggedContext = e.draggedContext;
      console.log(e.draggedContext);
      this.futureIndex = e.draggedContext.futureIndex;
      this.originIndex = e.draggedContext.index;
      this.drag = e.related.dataset.tag;
      if (e.related.dataset.tag == "taga2") {
        return true;
      }
      if (e.related.dataset.tag == "taga3") {
        this.add3();
        return false;
      }
      return false;
    },
    onMove3(e) {
      console.log("拖拽3");
      this.orginTag = 2;
      this.originArea = this.arr3;
      this.draggedContext = e.draggedContext;
      this.futureIndex = e.draggedContext.futureIndex;
      this.originIndex = e.draggedContext.index;
      this.drag = e.related.dataset.tag;
      if (e.related.dataset.tag == "taga3") {
        return true;
      }

      return false;
    },
  },
};
</script>
<style scoped>
.itxst {
  margin: 10px;
  text-align: left;
}

.col {
  width: 40%;
  flex: 1;
  padding: 10px;
  border: solid 1px #eee;
  border-radius: 5px;
  float: left;
}

.col + .col {
  margin-left: 10px;
}
.el-row {
  margin: 20px 0;
}
.item {
  padding: 6px 12px;
  margin: 0px 10px 0px 10px;
  border: solid 1px #eee;
  background-color: #f1f1f1;
  text-align: left;
}

.item + .item {
  border-top: none;
  margin-top: 6px;
}

.item:hover {
  background-color: #fdfdfd;
  cursor: move;
}

.item2 {
  padding: 6px 12px;
  margin: 0px 10px 0px 10px;
  border: solid 1px #eee;
  background-color: transparent;
  text-align: left;
}

.item2 + .item2 {
  border-top: none;
  margin-top: 6px;
}

.item2:hover {
  outline: solid 1px #ddd;
  cursor: move;
}
</style>
